<!--
 * @Author: 刘苗
 * @Description: 表格过滤查询
 * @Date: 2021-08-26 11:31:58
-->
<template>
  <!-- 查询过滤 -->
  <el-form
    :model="form"
    ref="form"
    :label-width="tableOptions.labelWidth || '120px'"
    :inline="true"
    size="small"
  >
    <el-form-item
      v-for="(item, index) in searcFromList.slice(0, 4)"
      :key="index"
      v-if="item.showInSerach"
      :label="item.searTitle + '：' || '关键字：'"
      :prop="item.props"
      :rules="item.rules"
    >
      <!-- 普通输入 -->
      <el-input
        v-model="form[item.props]"
        v-if="item.valueType === 'input'"
        :value="item.defaultValue || null"
        :placeholder="item.prop ? item.prop.placeholder : '请输入'"
        :style="item.prop ? item.prop.style : {}"
        size="normal"
      >
      </el-input>
      <!-- 下拉 -->
      <el-select
        v-model="form[item.props]"
        v-if="item.valueType === 'select'"
        :value="item.defaultValue || null"
        :placeholder="item.prop ? item.prop.placeholder : '请输入'"
      >
        <el-option
          v-for="el in item.sourceData"
          :key="el.value"
          :label="el.label"
          :value="el.value"
        >
        </el-option>
      </el-select>

      <!-- 时间选择 -->
      <el-date-picker
        v-model="form['datetimerange']"
        v-if="item.valueType === 'datetime'"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <!-- 数字 -->
      <el-input-number
        v-model="form[item.props]"
        v-if="item.valueType === 'inputNumber'"
        controls-position="right"
        :min="item.prop ? item.prop.min : 1"
        :max="item.prop ? item.prop.max : 99999"
      ></el-input-number>
    </el-form-item>

    <!-- 隐藏项目 -->
    <span v-show="isShowMore">
      <el-form-item
        v-for="(item, index) in searcFromList.slice(4, 100)"
        :key="index"
        v-if="item.showInSerach"
        :label="item.searTitle + '：' || '关键字：'"
        :prop="item.props"
        :rules="item.rules"
      >
        <!-- 普通输入 -->
        <el-input
          v-model="form[item.props]"
          v-if="item.valueType === 'input'"
          :value="item.defaultValue || null"
          :placeholder="item.prop ? item.prop.placeholder : '请输入'"
          :style="item.prop ? item.prop.style : {}"
          size="normal"
        >
        </el-input>
        <!-- 下拉 -->
        <el-select
          v-model="form[item.props]"
          v-if="item.valueType === 'select'"
          :value="item.defaultValue || null"
          :placeholder="item.prop ? item.prop.placeholder : '请输入'"
        >
          <el-option
            v-for="el in item.sourceData"
            :key="el.value"
            :label="el.label"
            :value="el.value"
          >
          </el-option>
        </el-select>

        <!-- 时间选择 -->
        <el-date-picker
          v-model="form['datetimerange']"
          v-if="item.valueType === 'datetime'"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <!-- 数字 -->
        <el-input-number
          v-model="form[item.props]"
          v-if="item.valueType === 'inputNumber'"
          controls-position="right"
          :min="item.prop ? item.prop.min : 1"
          :max="item.prop ? item.prop.max : 99999"
        ></el-input-number>
      </el-form-item>
    </span>
    <!-- 查询 -->
    <el-form-item>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="handleSearch"
        >查询</el-button
      >
      <el-button size="small" icon="el-icon-refresh-right" @click="handleRest"
        >重置</el-button
      >

      <el-button type="text" size="small" @click="isShowMore = !isShowMore">
        {{ isShowMore ? "收起" : "展开更多" }}
        <i class="el-icon-arrow-down" v-if="!isShowMore"></i>
        <i class="el-icon-arrow-up" v-else></i>
      </el-button>
    </el-form-item>
  </el-form>
</template>



<script>
export default {
  props: ["tableOptions"],
  data() {
    return {
      isShowMore: false, //是否展开
      form: {}, //外部查询参数
    };
  },
  computed: {
    // 表单查询计算
    searcFromList() {
      return this.tableOptions.cols.filter((el) => el.showInSerach);
    },
  },
  watch: {
    "form.datetimerange"(v) {
      if (v && v.length) {
        this.form.startTime = v[0];
        this.form.endTime = v[0];
      }
    },
  },
  methods: {
    // 查询
    handleSearch() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("handleSearch", this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    handleRest() {
      for (var _key in this.form) {
        this.form[_key] = null;
      }
      this.handleSearch();
    },
  },
};
</script>